<template>
  <div class="menu-bar" >
    <div class="icon-box">
      <i :class="icon"></i>
    </div>
    <div class="content-box">
      <div class="info">
        <p class="name">{{name}}<span class="count">  ({{count}})</span></p>
      </div>
      <div v-if="isPlaying" class="status">
        <i class="icon-volume-medium"></i>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "music-menu-bar",
    props:{
      name:{
        type:String,
        default:'未命名'
      },
      count:{
        type:Number,
        default:0
      },
      icon:{
        type:String,
        default:'icon-music'
      },
      isPlaying:{
        type:Boolean,
        default:false
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../../../static/style/public';
  $menuHeight:50px;
  $icon-size:25px;
  p{
    margin:0px;
  }
  .menu-bar{
    display: flex;
    width:100%;
    height:$menuHeight;
    background-color: white;
    p,i,span{
      line-height: $menuHeight;
    }
    i{
      font-size: $icon-size;
      color:$primaryColor;
    }
    .icon-box{
      width:$menuHeight;
      height:$menuHeight;
      text-align: center;
    }
    .content-box{
      position:absolute;
      left:$menuHeight;
      right:0px;
      height:$menuHeight - 1px;
      border-bottom: 1px solid #f1f1f1;
      .info{
        display: flex;
        align-items: center;
        .count{
          font-size:1rem;
          color:#cccccc;
        }
      }

    }
    .status{
      position:absolute;
      top:0px;
      right:0px;
      width:$menuHeight;
      height:$menuHeight;
      text-align: center;
      i{
        font-size:20px;
      }
    }
  }
</style>
